<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  

  
  <title>Vue基础知识笔记 | 黑不溜球de博客么么哒</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="description" content="指令本质就是在模板中出现的特殊标记，根据这些标记让框架知道需要对这里的 DOM 元素进行什么操作 v-text动态更新数据，将数据解析为纯文本 1&lt;h1 v-text&#x3D;&quot;msg&quot;&gt;&amp;#123;&amp;#123;msg&amp;#125;&amp;#125;&lt;&#x2F;h1&gt;  v-html更新元素的 innerHTML，将数据解析成html标签 1&lt;h1 v-html&#x3D;&amp;quo">
<meta property="og:type" content="article">
<meta property="og:title" content="Vue基础知识笔记">
<meta property="og:url" content="http://example.com/2020/11/03/vue/index.html">
<meta property="og:site_name" content="黑不溜球de博客么么哒">
<meta property="og:description" content="指令本质就是在模板中出现的特殊标记，根据这些标记让框架知道需要对这里的 DOM 元素进行什么操作 v-text动态更新数据，将数据解析为纯文本 1&lt;h1 v-text&#x3D;&quot;msg&quot;&gt;&amp;#123;&amp;#123;msg&amp;#125;&amp;#125;&lt;&#x2F;h1&gt;  v-html更新元素的 innerHTML，将数据解析成html标签 1&lt;h1 v-html&#x3D;&amp;quo">
<meta property="og:locale" content="en_US">
<meta property="article:published_time" content="2020-11-03T07:25:38.866Z">
<meta property="article:modified_time" content="2020-11-03T07:26:27.790Z">
<meta property="article:author" content="Jone-xin">
<meta name="twitter:card" content="summary">
  
    <link rel="alternate" href="/my_blog/atom.xml" title="黑不溜球de博客么么哒" type="application/atom+xml">
  
  
    <link rel="icon" href="/favicon.png">
  
  
    <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
  
  
<link rel="stylesheet" href="/my_blog/css/style.css">

<meta name="generator" content="Hexo 5.2.0"></head>

<body>
  <div id="container">
    <div id="wrap">
      <header id="header">
  <div id="banner"></div>
  <div id="header-outer" class="outer">
    <div id="header-title" class="inner">
      <h1 id="logo-wrap">
        <a href="/my_blog/" id="logo">黑不溜球de博客么么哒</a>
      </h1>
      
    </div>
    <div id="header-inner" class="inner">
      <nav id="main-nav">
        <a id="main-nav-toggle" class="nav-icon"></a>
        
          <a class="main-nav-link" href="/my_blog/">主页</a>
        
          <a class="main-nav-link" href="/my_blog/archives">归档</a>
        
          <a class="main-nav-link" target="_blank" rel="noopener" href="https://gitee.com/xiangxinag-darling">@我的gitee</a>
        
      </nav>
      <nav id="sub-nav">
        
          <a id="nav-rss-link" class="nav-icon" href="/my_blog/atom.xml" title="RSS Feed"></a>
        
        <a id="nav-search-btn" class="nav-icon" title="Search"></a>
      </nav>
      <div id="search-form-wrap">
        <form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" class="search-form-input" placeholder="Search"><button type="submit" class="search-form-submit">&#xF002;</button><input type="hidden" name="sitesearch" value="http://example.com"></form>
      </div>
    </div>
  </div>
</header>
      <div class="outer">
        <section id="main"><article id="post-vue" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/my_blog/2020/11/03/vue/" class="article-date">
  <time datetime="2020-11-03T07:25:38.866Z" itemprop="datePublished">2020-11-03</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 class="article-title" itemprop="name">
      Vue基础知识笔记
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <h3 id="指令"><a href="#指令" class="headerlink" title="指令"></a>指令</h3><p>本质就是在模板中出现的特殊标记，根据这些标记让框架知道需要对这里的 DOM 元素进行什么操作</p>
<h4 id="v-text"><a href="#v-text" class="headerlink" title="v-text"></a>v-text</h4><p>动态更新数据，将数据解析为纯文本</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">h1</span> <span class="attr">v-text</span>=<span class="string">&quot;msg&quot;</span>&gt;</span>&#123;&#123;msg&#125;&#125;<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h4 id="v-html"><a href="#v-html" class="headerlink" title="v-html"></a>v-html</h4><p>更新元素的 innerHTML，将数据解析成html标签</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">h1</span> <span class="attr">v-html</span>=<span class="string">&quot;msg&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h4 id="v-bind"><a href="#v-bind" class="headerlink" title="v-bind"></a>v-bind</h4><p>绑定属性：简写 ‘ : ’</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">p</span> <span class="attr">:title</span>=<span class="string">&quot;messeage&quot;</span>&gt;</span>&#123;&#123;messeage&#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h4 id="v-on"><a href="#v-on" class="headerlink" title="v-on"></a>v-on</h4><p>绑定事件：简写”@”</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;handClick&quot;</span>&gt;</span>点击<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>v-on的事件修饰符：</p>
<ul>
<li><p><code>.stop</code> <strong>阻止冒泡</strong>，调用 event.stopPropagation() // 比如说一个div下有一个弹窗和一个表单 点击提交按钮点击了<input type="submit" />提交表单信息 点击弹出层周边空白区域，关闭弹窗 ，当表单显示在弹窗层上方时，为防止弹窗被意外关闭，需要阻止表单提交按钮冒泡行为</p>
</li>
<li><p><code>.prevent</code> <strong>阻止默认事件</strong>，调用 event.preventDefault() // 比如说点击了链接标签a,在跳转之前，要修改一些URL参数 </p>
</li>
<li><p><code>.capture</code> 添加事件侦听器时使用事件<code>捕获</code>模式  // 捕获阶段先于冒泡，如果在尽量顶层处理事件，然后阻止传播，可以略微节约性能开销。scroll/resize 这类可能连续触发的事件不冒泡的原因</p>
</li>
<li><p><code>.self</code> <strong>只当事件在该元素本身（比如不是子元素）触发时触发回调</strong></p>
</li>
<li><p><code>.once</code> <strong>事件只触发一次</strong></p>
</li>
<li><p>按键修饰符</p>
</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"> &lt;input v-on:keyup.13&#x3D;&quot;submit&quot;&gt; </span><br><span class="line">记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：</span><br><span class="line"> &lt;input v-on:keyup.enter&#x3D;&quot;submit&quot;&gt;</span><br><span class="line"> &lt;input @keyup.enter&#x3D;&quot;submit&quot;&gt;</span><br><span class="line"> 按键别名包括：.enter .tab .delete (捕获 “删除” 和 “退格” 键) .esc .space .up .down .left .right.ctrl .shift .meta（windows 键，mac-command 键，)</span><br></pre></td></tr></table></figure>



<h4 id="v-model"><a href="#v-model" class="headerlink" title="v-model"></a>v-model</h4><p>在表单元素上创建双向数据绑定,监听用户的输入事件以更新数据</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 动态双向帮定 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;msg&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span>&#123;&#123;msg&#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- 复选框传递绑定数组 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;checkbox&quot;</span> <span class="attr">value</span>=<span class="string">&quot;01&quot;</span> <span class="attr">id</span>=<span class="string">&quot;&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;ok&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;checkbox&quot;</span> <span class="attr">value</span>=<span class="string">&quot;02&quot;</span> <span class="attr">id</span>=<span class="string">&quot;&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;ok&quot;</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- 单选框绑定 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;radio&quot;</span> <span class="attr">value</span>=<span class="string">&quot;冲&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- 密码 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;password&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;en1&quot;</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h4 id="v-for"><a href="#v-for" class="headerlink" title="v-for"></a>v-for</h4><p>循环</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-for</span>=<span class="string">&quot;item in items&quot;</span>&gt;</span></span><br><span class="line">  &#123;&#123; item.text &#125;&#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- 遍历数组 item 为当前项，index 为索引 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span> <span class="attr">v-for</span>=<span class="string">&quot;(item, index) in list&quot;</span>&gt;</span>&#123;&#123;item&#125;&#125; -- &#123;&#123;index&#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!--遍历对象 item 为值，key 为键，index 为索引 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span> <span class="attr">v-for</span>=<span class="string">&quot;(item, key, index) in obj&quot;</span>&gt;</span>&#123;&#123;item&#125;&#125; -- &#123;&#123;key&#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- 遍历常量 item为从1开始的递增值 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span> <span class="attr">v-for</span>=<span class="string">&quot;item in 10&quot;</span>&gt;</span>&#123;&#123;item&#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h4 id="动态绑定class-style"><a href="#动态绑定class-style" class="headerlink" title="动态绑定class,style"></a>动态绑定class,style</h4><ul>
<li>动态绑定class</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 对象的方式 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span> <span class="attr">:class</span>=<span class="string">&quot;&#123;active:true&#125;&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- 数组的方式 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span> <span class="attr">:class</span>=<span class="string">&quot;[&#x27;active&#x27;,&#x27;toggle&#x27;]&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- 数组对象一起 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span> <span class="attr">:class</span>=<span class="string">&quot;[&#123;active:true&#125;,&#x27;ok&#x27;]&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br></pre></td></tr></table></figure>

<ul>
<li>动态绑定style</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- style --&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- 1 对象书写方式 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-bind:style</span>=<span class="string">&quot;&#123; color: activeColor, fontSize: fontSize + &#x27;px&#x27; &#125;&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- 2 数组书写方式--&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-bind:style</span>=<span class="string">&quot;[baseStyles, overridingStyles]&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h4 id="v-if-v-show"><a href="#v-if-v-show" class="headerlink" title="v-if,v-show"></a>v-if,v-show</h4><ul>
<li><p><code>v-if</code>：根据表达式的值的真假条件，【销毁或重建元素 】<strong>v-if适合条件不大可能改变的场景</strong></p>
</li>
<li><p><code>v-show</code>：根据表达式之真假值，【切换元素的 display CSS 属性】dom元素一直在 <strong>v-show适合频繁切换</strong></p>
</li>
</ul>
<h4 id="v-cloak"><a href="#v-cloak" class="headerlink" title="v-cloak"></a>v-cloak</h4><p>这个指令保持在元素上直到关联实例结束编译</p>
<p>防止刷新页面，网速慢的情况下出现等数据格式</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-cloak</span>&gt;</span></span><br><span class="line">  &#123;&#123; message &#125;&#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>



<h4 id="v-pre"><a href="#v-pre" class="headerlink" title="v-pre"></a>v-pre</h4><p>跳过这个元素和它的子元素的编译过程。<strong>可以用来显示原始 Mustache 标签</strong>。跳过大量没有指令的节点会加快编译。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">p</span> <span class="attr">v-pre</span>&gt;</span>&#123;&#123;you are my sun shy&#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h4 id="v-once"><a href="#v-once" class="headerlink" title="v-once"></a>v-once</h4><p><strong>只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过</strong>。这可以用于优化更新性能。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">span</span> <span class="attr">v-once</span>&gt;</span>This will never change: &#123;&#123;msg&#125;&#125;<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h4 id="watch：监听属性值的变化"><a href="#watch：监听属性值的变化" class="headerlink" title="watch：监听属性值的变化"></a>watch：监听属性值的变化</h4><p>watch 的一个特点是，最初绑定的时候是不会执行的，要等到数据改变时才执行监听计算，那我们想要一开始就让他最初绑定，加一个属性immediate:true 即可。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">watch: &#123;</span><br><span class="line">  firstName: &#123;</span><br><span class="line">    <span class="comment">//参数名字不可更改,函数名字也是固定的</span></span><br><span class="line">    <span class="function"><span class="title">handler</span>(<span class="params">newName, oldName</span>)</span> &#123;</span><br><span class="line">      <span class="built_in">this</span>.fullName = newName + <span class="string">&#x27; &#x27;</span> + <span class="built_in">this</span>.lastName;</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="comment">// 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法</span></span><br><span class="line">    immediate: <span class="literal">true</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p> deep属性:</p>
<p>默认情况下 ,handler函数只会监听外层变化，当监听的是一个对象时，我们要深入的去监听属性值的变化们就要用到deep属性。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">watch: &#123;</span><br><span class="line">   obj: &#123;</span><br><span class="line">     <span class="function"><span class="title">handler</span>(<span class="params">newName, oldName</span>)</span> &#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">&#x27;obj.a changed&#x27;</span>);</span><br><span class="line">     &#125;,</span><br><span class="line">     immediate: <span class="literal">true</span>，</span><br><span class="line">　　　 deep:<span class="literal">true</span>,</span><br><span class="line">   &#125;</span><br><span class="line"> &#125; </span><br></pre></td></tr></table></figure>

<p><code>deep</code>的意思就是深入观察，监听器会一层层的往下遍历，给对象的所有属性都加上这个监听器，但是这样性能开销就会非常大了，任何修改<code>obj</code>里面任何一个属性都会触发这个监听器里的 handler。</p>
<p>优化：以字符串的形式监听：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">watch: &#123;</span><br><span class="line">  <span class="string">&#x27;firstName.a&#x27;</span>: &#123;</span><br><span class="line">    <span class="function"><span class="title">handler</span>(<span class="params">newName, oldName</span>)</span> &#123;</span><br><span class="line">      <span class="built_in">console</span>.log(newName)</span><br><span class="line">    &#125;,</span><br><span class="line">    immediate: <span class="literal">true</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125; </span><br></pre></td></tr></table></figure>



<h4 id="组件的生命周期"><a href="#组件的生命周期" class="headerlink" title="组件的生命周期"></a>组件的生命周期</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">每个阶段可以做的事情</span><br><span class="line"></span><br><span class="line">    beforeCreate   <span class="comment">//可以在这加个loading事件，</span></span><br><span class="line">    created       <span class="comment">// 在这里结束loading事件，发送异步请求</span></span><br><span class="line">    beforeMount</span><br><span class="line">    mounted        <span class="comment">//操作dom</span></span><br><span class="line">    beforeUpdate</span><br><span class="line">    updated        <span class="comment">//对更新后的数据统一处理</span></span><br><span class="line">    beforeDestroy  <span class="comment">//清除定时器,清除无用的全局缓存数据  这一步，实例仍然完全可用。</span></span><br><span class="line">    destroyed      Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。</span><br></pre></td></tr></table></figure>

<h4 id="父子组件的通信"><a href="#父子组件的通信" class="headerlink" title="父子组件的通信"></a>父子组件的通信</h4><ul>
<li>父传子</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//父组件</span></span><br><span class="line">&lt;Son  :msg=<span class="string">&#x27;msg&#x27;</span>/&gt;</span><br><span class="line"><span class="comment">//子组件</span></span><br><span class="line">props:&#123;</span><br><span class="line">   		msg	:&#123;</span><br><span class="line">      type:<span class="built_in">String</span>,</span><br><span class="line">      <span class="keyword">default</span>:<span class="string">&#x27;&#x27;</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li>子传父</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//子组件</span></span><br><span class="line">&lt;button @click=<span class="string">&quot;sendFather&quot;</span>&gt;传递<span class="number">100</span>给父组件&lt;/button&gt; </span><br><span class="line">methods:&#123;</span><br><span class="line">  <span class="comment">//自组件通过自定义事件</span></span><br><span class="line">    <span class="function"><span class="title">sendFather</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">       <span class="built_in">this</span>.$emit(<span class="string">&#x27;customEvent&#x27;</span>,<span class="number">100</span>)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//父组件</span></span><br><span class="line">&lt;Son  :msg=<span class="string">&#x27;msg&#x27;</span> @customEvent=<span class="string">&#x27;handSon&#x27;</span>/&gt;</span><br><span class="line"> methods:&#123;</span><br><span class="line">   <span class="function"><span class="title">handSon</span>(<span class="params">value</span>)</span>&#123;</span><br><span class="line">     alert(value)</span><br><span class="line">   &#125;</span><br><span class="line"> &#125;</span><br></pre></td></tr></table></figure>

<p>$parent:调用父组件的方法</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F;自组件</span><br><span class="line">&lt;button @click&#x3D;&quot;fn2&quot;&gt;调用父组件的方法&lt;&#x2F;button&gt;</span><br><span class="line">methods:&#123;</span><br><span class="line">fn2() &#123;</span><br><span class="line">	this.$parent.fn()</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br><span class="line">&#x2F;&#x2F;父组件</span><br><span class="line">methods:&#123;</span><br><span class="line">fn()&#123;</span><br><span class="line">	alert(&#39;我是父组件的方法&#39;)</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="computed"><a href="#computed" class="headerlink" title="computed"></a>computed</h4><p>计算属性，对表达式进行抽取，简化模版中的代码</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//简化&#123;&#123;&#125;&#125;中表达式</span></span><br><span class="line">&lt;p style=<span class="string">&quot;color:red&quot;</span>&gt;&#123;&#123;handNum&#125;&#125;&lt;/p&gt;</span><br><span class="line"><span class="function"><span class="title">data</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="keyword">return</span>&#123;</span><br><span class="line">      num:<span class="number">4</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">computed:&#123;</span><br><span class="line">  <span class="function"><span class="title">handNum</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="keyword">return</span> (<span class="built_in">this</span>.num+<span class="number">4</span>)/<span class="number">2</span>*<span class="number">2342</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="methods"><a href="#methods" class="headerlink" title="methods"></a>methods</h4><p>​    定义方法的位置</p>
<h4 id="props"><a href="#props" class="headerlink" title="props"></a>props</h4><p>定义接受父组件传递的信息</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">props:&#123;</span><br><span class="line">  	<span class="comment">//对应传过来的变量的名字</span></span><br><span class="line">    msg:&#123;</span><br><span class="line">      type:<span class="built_in">String</span>,</span><br><span class="line">      <span class="keyword">default</span>:<span class="string">&#x27;222&#x27;</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br></pre></td></tr></table></figure>

<h4 id="路由模块"><a href="#路由模块" class="headerlink" title="路由模块"></a>路由模块</h4><ul>
<li><p>路由配置</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//嵌套路由</span></span><br><span class="line"><span class="keyword">const</span> router = <span class="keyword">new</span> VueRouter(&#123;</span><br><span class="line">  routes: [</span><br><span class="line">    &#123; <span class="attr">path</span>: <span class="string">&#x27;/user/:id&#x27;</span>, <span class="attr">component</span>: User,</span><br><span class="line">      children: [</span><br><span class="line">        &#123;</span><br><span class="line">          <span class="comment">// 当 /user/:id/profile 匹配成功，</span></span><br><span class="line">          <span class="comment">// UserProfile 会被渲染在 User 的 &lt;router-view&gt; 中</span></span><br><span class="line">          path: <span class="string">&#x27;profile&#x27;</span>,</span><br><span class="line">          component: UserProfile</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">          <span class="comment">// 当 /user/:id/posts 匹配成功</span></span><br><span class="line">          <span class="comment">// UserPosts 会被渲染在 User 的 &lt;router-view&gt; 中</span></span><br><span class="line">          path: <span class="string">&#x27;posts&#x27;</span>,</span><br><span class="line">          component: UserPosts</span><br><span class="line">        &#125;</span><br><span class="line">      ]</span><br><span class="line">    &#125;</span><br><span class="line">  ]</span><br><span class="line">&#125;)</span><br><span class="line">--------------</span><br><span class="line">routes: [</span><br><span class="line">    <span class="comment">// 动态路径参数 以冒号开头</span></span><br><span class="line">    &#123; <span class="attr">path</span>: <span class="string">&#x27;/user/:id&#x27;</span>, <span class="attr">component</span>: User &#125;</span><br><span class="line">  ]</span><br><span class="line">-------------</span><br><span class="line">  watch: &#123;</span><br><span class="line">    $route(to, <span class="keyword">from</span>) &#123;</span><br><span class="line">      <span class="comment">// 对路由变化作出响应...</span></span><br><span class="line">      <span class="comment">//过度动画什么的</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">--------------</span><br><span class="line"><span class="comment">//比如做404页面的时候</span></span><br><span class="line">&#123;</span><br><span class="line">  <span class="comment">// 会匹配所有路径</span></span><br><span class="line">  path: <span class="string">&#x27;*&#x27;</span></span><br><span class="line">&#125;</span><br><span class="line">&#123;</span><br><span class="line">  <span class="comment">// 会匹配以 `/user-` 开头的任意路径</span></span><br><span class="line">  path: <span class="string">&#x27;/user-*&#x27;</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
<li><p>页面导航，占位</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&lt;router-link to=<span class="string">&quot;/sch/home&quot;</span> &gt;学校概况&lt;/router-link&gt;</span><br><span class="line">&lt;router-view :school_id1=<span class="string">&quot;school_id1&quot;</span> /&gt;</span><br><span class="line"><span class="comment">//链接一个命名路由</span></span><br><span class="line">&lt;router-link :to=<span class="string">&quot;&#123; name: &#x27;user&#x27;, params: &#123; userId: 123 &#125;&#125;&quot;</span>&gt;User&lt;/router-link&gt;</span><br><span class="line"><span class="comment">//等价于这个</span></span><br><span class="line">router.push(&#123; <span class="attr">name</span>: <span class="string">&#x27;user&#x27;</span>, <span class="attr">params</span>: &#123; <span class="attr">userId</span>: <span class="number">123</span> &#125;&#125;)</span><br></pre></td></tr></table></figure>
</li>
<li><p>更改路由地址</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">方式1：直接修改地址栏</span><br><span class="line">方式2：this.$router.push(&#123;path: &#39;&#x2F;home&#39;, query: &#123;id: &quot;2&quot;&#125;&#125;);</span><br><span class="line">方式3：&lt;router-link to&#x3D;&quot;路由地址&quot;&gt;&lt;&#x2F;router-link&gt;</span><br></pre></td></tr></table></figure>
</li>
<li><p>命名视图(有时候想同时 (同级) 展示多个视图，而不是嵌套展示)</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">&lt;router-view <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;view one&quot;</span>&gt;&lt;/router-view&gt;</span><br><span class="line">&lt;router-view <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;view two&quot;</span> name=<span class="string">&quot;a&quot;</span>&gt;&lt;/router-view&gt;</span><br><span class="line">&lt;router-view <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;view three&quot;</span> name=<span class="string">&quot;b&quot;</span>&gt;&lt;/router-view&gt;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> router = <span class="keyword">new</span> VueRouter(&#123;</span><br><span class="line">  routes: [</span><br><span class="line">    &#123;</span><br><span class="line">      path: <span class="string">&#x27;/&#x27;</span>,</span><br><span class="line">      components: &#123;</span><br><span class="line">        <span class="keyword">default</span>: Foo,</span><br><span class="line">        a: Bar,</span><br><span class="line">        b: Baz</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  ]</span><br><span class="line">&#125;</span><br><span class="line">                             </span><br></pre></td></tr></table></figure>
</li>
<li><p>别名（**<code>/a</code> 的别名是 <code>/b</code>，意味着，当用户访问 <code>/b</code> 时，URL 会保持为 <code>/b</code>，但是路由匹配则为 <code>/a</code>，就像用户访问 <code>/a</code> 一样。**）</p>
</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> router = <span class="keyword">new</span> VueRouter(&#123;</span><br><span class="line">  routes: [</span><br><span class="line">    <span class="comment">//b是a的别名</span></span><br><span class="line">    &#123; <span class="attr">path</span>: <span class="string">&#x27;/a&#x27;</span>, <span class="attr">component</span>: A, <span class="attr">alias</span>: <span class="string">&#x27;/b&#x27;</span> &#125;</span><br><span class="line">  ]</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<ul>
<li><p>重定向</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> router = <span class="keyword">new</span> VueRouter(&#123;</span><br><span class="line">  routes: [</span><br><span class="line">    &#123; <span class="attr">path</span>: <span class="string">&#x27;/a&#x27;</span>, <span class="attr">redirect</span>: <span class="string">&#x27;/b&#x27;</span> &#125;</span><br><span class="line">  ]</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
</li>
<li><p>路由过度动画</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- 使用动态的 transition name --&gt;</span><br><span class="line">&lt;transition :name=<span class="string">&quot;transitionName&quot;</span>&gt;</span><br><span class="line">  &lt;router-view&gt;&lt;/router-view&gt;</span><br><span class="line">&lt;/transition&gt;</span><br><span class="line"></span><br><span class="line">---------------------------</span><br><span class="line"><span class="comment">// 接着在父组件内</span></span><br><span class="line"><span class="comment">// watch $route 决定使用哪种过渡</span></span><br><span class="line">watch: &#123;</span><br><span class="line">  <span class="string">&#x27;$route&#x27;</span> (to, <span class="keyword">from</span>) &#123;</span><br><span class="line">    <span class="keyword">const</span> toDepth = to.path.split(<span class="string">&#x27;/&#x27;</span>).length</span><br><span class="line">    <span class="keyword">const</span> fromDepth = <span class="keyword">from</span>.path.split(<span class="string">&#x27;/&#x27;</span>).length</span><br><span class="line">    <span class="built_in">this</span>.transitionName = toDepth &lt; fromDepth ? <span class="string">&#x27;slide-right&#x27;</span> : <span class="string">&#x27;slide-left&#x27;</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



</li>
</ul>
<h4 id="vuex"><a href="#vuex" class="headerlink" title="vuex"></a>vuex</h4><p>Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态。</p>
<p>vuex解决了组件之间同一状态的共享问题。多个组件依赖于同一状态。</p>
<p>![屏幕快照 2020-09-29 上午8.28.31](/Users/niruoshangzaichang/Desktop/屏幕快照 2020-09-29 上午8.28.31.png)</p>
<p>store文件夹下index.js的结构目录</p>
<p>state (类似存储全局变量的数据)<br>getters (提供用来获取state数据的方法)<br>actions (提供跟后台接口打交道的方法，并调用mutations提供的方法)—异步【dispatch触发】<br>mutations (提供存储设置state数据的方法)–同步【用commit触发】</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; createStore &#125; <span class="keyword">from</span> <span class="string">&#x27;vuex&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> createStore(&#123;</span><br><span class="line">  state: &#123;</span><br><span class="line">  &#125;,</span><br><span class="line">  getters:&#123;</span><br><span class="line">    <span class="comment">//定义方法获取state中的数据</span></span><br><span class="line">  &#125;,</span><br><span class="line">  mutations: &#123;</span><br><span class="line">    <span class="comment">//同步修改state中的数据</span></span><br><span class="line">  &#125;,</span><br><span class="line">  actions: &#123;</span><br><span class="line">    <span class="comment">//异步修改state中的数据</span></span><br><span class="line">  &#125;,</span><br><span class="line">  modules: &#123;</span><br><span class="line">    <span class="comment">//分块store，防止臃肿</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<p>案例：</p>
<p>Store/index.js</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; createStore &#125; <span class="keyword">from</span> <span class="string">&#x27;vuex&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> createStore(&#123;</span><br><span class="line">  state: &#123;</span><br><span class="line">    <span class="comment">//数据源</span></span><br><span class="line">    name:<span class="string">&#x27;xin&#x27;</span></span><br><span class="line">  &#125;,</span><br><span class="line">  getters:&#123;</span><br><span class="line">    <span class="comment">//获取数据</span></span><br><span class="line">    <span class="function"><span class="title">getName</span>(<span class="params">state</span>)</span>&#123;</span><br><span class="line">      <span class="keyword">return</span> state.name</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  mutations: &#123;</span><br><span class="line">    <span class="comment">//自定义方法，同步修改数据</span></span><br><span class="line">    setName (state, value) &#123;</span><br><span class="line">      state.name = value</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  actions: &#123;</span><br><span class="line">    <span class="comment">//异步的提交修改（调用mutations中的方法）</span></span><br><span class="line">    <span class="function"><span class="title">asyncSetName</span>(<span class="params">&#123;commit,state&#125;, value</span>)</span> &#123;</span><br><span class="line">      <span class="built_in">setTimeout</span>(<span class="function">()=&gt;</span>&#123;</span><br><span class="line">        commit(<span class="string">&#x27;setName&#x27;</span>,value)</span><br><span class="line">      &#125;,<span class="number">1000</span>)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  modules: &#123;</span><br><span class="line">    <span class="comment">//分治模块</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>App.js</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">&lt;p&gt;&#123;&#123;getName&#125;&#125;&lt;/p&gt;</span><br><span class="line">&lt;button @click=<span class="string">&quot;setName&quot;</span>&gt;同步修改store中的数据&lt;/button&gt;</span><br><span class="line">&lt;button @click=<span class="string">&quot;asyncSetName&quot;</span>&gt;异步修改store中的数据&lt;/button&gt;</span><br><span class="line"></span><br><span class="line">computed:&#123;</span><br><span class="line">    <span class="comment">// 获取vuex中的数据</span></span><br><span class="line">    <span class="function"><span class="title">getName</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">      <span class="keyword">return</span> <span class="built_in">this</span>.$store.getters.getName</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  methods:&#123;</span><br><span class="line">    <span class="comment">//设置methods中的数据</span></span><br><span class="line">    <span class="function"><span class="title">setName</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">      <span class="built_in">this</span>.$store.commit(<span class="string">&#x27;setName&#x27;</span>,<span class="string">&#x27;xinxinxinxin&#x27;</span>)</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="function"><span class="title">asyncSetName</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">      <span class="built_in">this</span>.$store.dispatch(<span class="string">&#x27;asyncSetName&#x27;</span>,<span class="string">&#x27;我是修改后的异步&#x27;</span>)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>

<h4 id="mapState、mapGetters、mapActions，mapMutations的作用"><a href="#mapState、mapGetters、mapActions，mapMutations的作用" class="headerlink" title="mapState、mapGetters、mapActions，mapMutations的作用"></a>mapState、mapGetters、mapActions，mapMutations的作用</h4><p>很多时候 , this.<code>$store.getters.setName() 、this.$store.dispatch()这种写法不方便 ,使用 </code>mapState、mapGetters、mapActions` ,mapMutations就不会这么复杂了</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div&gt;</span><br><span class="line">    &lt;p&gt;&#123;&#123;getName1&#125;&#125;&lt;/p&gt;</span><br><span class="line">    &lt;button @click=<span class="string">&quot;setName1&quot;</span>&gt;同步修改store中的数据&lt;/button&gt;</span><br><span class="line">    &lt;button @click=<span class="string">&quot;asyncSetName1&quot;</span>&gt;异步修改store中的数据&lt;/button&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line"><span class="keyword">import</span> &#123; mapGetters, mapActions, mapState, mapMutations &#125; <span class="keyword">from</span> <span class="string">&quot;vuex&quot;</span>;</span><br><span class="line">  computed:&#123;</span><br><span class="line">    <span class="comment">// 获取vuex中的数据</span></span><br><span class="line">    <span class="comment">// getName()&#123;</span></span><br><span class="line">    <span class="comment">//   return this.$store.getters.getName</span></span><br><span class="line">    <span class="comment">// &#125;</span></span><br><span class="line">    ...mapGetters([<span class="string">&#x27;getName&#x27;</span>]),</span><br><span class="line">    <span class="function"><span class="title">getName1</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">      <span class="keyword">return</span> <span class="built_in">this</span>.getName</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">  &#125;,</span><br><span class="line">  methods:&#123;</span><br><span class="line">    <span class="comment">//设置methods中的数据</span></span><br><span class="line">    <span class="comment">// setName1()&#123;</span></span><br><span class="line">    <span class="comment">//   this.$store.commit(&#x27;setName&#x27;,&#x27;xinxinxinxin&#x27;)</span></span><br><span class="line">    <span class="comment">// &#125;,</span></span><br><span class="line">    ...mapMutations([<span class="string">&#x27;setName&#x27;</span>]),</span><br><span class="line">    <span class="function"><span class="title">setName1</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">      <span class="built_in">this</span>.setName(<span class="string">&#x27;asdad&#x27;</span>)</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="comment">// asyncSetName()&#123;</span></span><br><span class="line">    <span class="comment">//   this.$store.dispatch(&#x27;asyncSetName&#x27;,&#x27;我是修改后的异步&#x27;)</span></span><br><span class="line">    <span class="comment">// &#125;</span></span><br><span class="line">    ...mapActions([<span class="string">&#x27;asyncSetName&#x27;</span>]),</span><br><span class="line">    <span class="function"><span class="title">asyncSetName1</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">      <span class="built_in">this</span>.asyncSetName(<span class="string">&#x27;keyi &#x27;</span>)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br><span class="line"></span><br><span class="line"></span><br></pre></td></tr></table></figure>












      
    </div>
    <footer class="article-footer">
      <a data-url="http://example.com/2020/11/03/vue/" data-id="ckhmnwyu000056rx4btvxddj1" class="article-share-link">Share</a>
      
      
    </footer>
  </div>
  
    
<nav id="article-nav">
  
    <a href="/my_blog/2020/11/03/react/" id="article-nav-newer" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Newer</strong>
      <div class="article-nav-title">
        
          React基础知识笔记
        
      </div>
    </a>
  
  
    <a href="/my_blog/2020/11/03/async/" id="article-nav-older" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Older</strong>
      <div class="article-nav-title">JS异步编程的三种方案</div>
    </a>
  
</nav>

  
</article>

</section>
        
          <aside id="sidebar">
  
    

  
    

  
    
  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Archives</h3>
    <div class="widget">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/my_blog/archives/2020/11/">November 2020</a></li><li class="archive-list-item"><a class="archive-list-link" href="/my_blog/archives/2020/10/">October 2020</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Recent Posts</h3>
    <div class="widget">
      <ul>
        
          <li>
            <a href="/my_blog/2020/11/18/zhengze/">JS中的正则表达式</a>
          </li>
        
          <li>
            <a href="/my_blog/2020/11/03/react/">React基础知识笔记</a>
          </li>
        
          <li>
            <a href="/my_blog/2020/11/03/vue/">Vue基础知识笔记</a>
          </li>
        
          <li>
            <a href="/my_blog/2020/11/03/async/">JS异步编程的三种方案</a>
          </li>
        
          <li>
            <a href="/my_blog/2020/11/03/computer/">计算机网路笔记</a>
          </li>
        
      </ul>
    </div>
  </div>

  
</aside>
        
      </div>
      <footer id="footer">
  
  <div class="outer">
    <div id="footer-info" class="inner">
      &copy; 2020 Jone-xin<br>
      Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>
    </div>
  </div>
</footer>
    </div>
    <nav id="mobile-nav">
  
    <a href="/my_blog/" class="mobile-nav-link">主页</a>
  
    <a href="/my_blog/archives" class="mobile-nav-link">归档</a>
  
    <a target="_blank" rel="noopener" href="https://gitee.com/xiangxinag-darling" class="mobile-nav-link">@我的gitee</a>
  
</nav>
    

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>


  
<link rel="stylesheet" href="/my_blog/fancybox/jquery.fancybox.css">

  
<script src="/my_blog/fancybox/jquery.fancybox.pack.js"></script>




<script src="/my_blog/js/script.js"></script>




  </div>
</body>
</html>